<template>
  <nav class="fixed top-1 left-1/2 -translate-x-1/2 z-[100]">
    <div class="nav-capsule group">
      <!-- Logo -->
      <router-link to="/" class="flex items-center gap-3 pr-6 border-r border-white/20 cursor-target">
        <div class="logo-emoji text-2xl transition-transform duration-300 group-hover:scale-110">
          🍃
        </div>
        <span class="font-bold text-white text-base tracking-tight">TqCoder</span>
      </router-link>

      <!-- 导航链接 -->
      <div class="flex items-center gap-2 px-2">
        <router-link 
          v-for="link in navLinks" 
          :key="link.to"
          :to="link.to" 
          active-class=""
          exact-active-class="router-link-active"
          :class="[
            'nav-link-pill cursor-target',
            'px-4 py-2.5 rounded text-sm font-medium',
            'text-gray-300 hover:text-white',
            'transition-all duration-300 relative'
          ]"
        >
          {{ link.label }}
        </router-link>
      </div>

      <!-- 登录按钮 -->
      <router-link 
        to="/login"
        class="login-button cursor-target flex items-center gap-2 px-5 py-2.5 rounded text-sm font-semibold transition-all duration-300 relative"
      >
        <!-- 用户图标 -->
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
        </svg>
        <span>登录</span>
      </router-link>


    </div>
  </nav>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface NavLink {
  to: string
  label: string
}

interface TopBarProps {
  navLinks?: NavLink[]
}

const props = withDefaults(defineProps<TopBarProps>(), {
  navLinks: () => [
    { to: '/', label: 'Home' },
    { to: '/code', label: 'Coding' },
    { to: '/market', label: 'Market' },
    { to: '/self-reference', label: 'SelfReference' },
    { to: '/brainstorm', label: 'Brainstorm' },
    { to: '/contact', label: 'About' }
  ]
})

</script>

<style scoped>
.nav-capsule {
  @apply backdrop-blur-2xl rounded-lg;
  @apply px-6 py-3 flex items-center gap-6;
  @apply shadow-2xl;
  background: linear-gradient(135deg, 
    rgba(5, 5, 5, 0.95) 0%, 
    rgba(10, 15, 12, 0.95) 50%, 
    rgba(8, 12, 20, 0.95) 100%
  );
  border: 2px solid rgba(66, 211, 146, 0.5);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(66, 211, 146, 0.3),
    0 0 40px rgba(66, 211, 146, 0.2);
  animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.nav-capsule::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 0.5rem;
  padding: 1px;
  background: linear-gradient(135deg, 
    rgba(66, 211, 146, 0.8), 
    rgba(100, 126, 255, 0.6), 
    rgba(66, 211, 146, 0.5)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0.3;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.nav-capsule:hover::before {
  opacity: 0.6;
}

.logo-emoji {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.nav-link-pill {
  position: relative;
  cursor: pointer;
  color: #e2e8f0;
}

.nav-link-pill:hover {
  background: rgba(66, 211, 146, 0.15);
  color: #ffffff;
  transform: translateY(-1px);
}

.nav-link-pill:active {
  transform: translateY(0);
  background: rgba(66, 211, 146, 0.2);
}

/* 激活态样式 */
.nav-link-pill.active,
.nav-link-pill.router-link-active {
  color: #ffffff;
  background: linear-gradient(135deg, 
    rgba(66, 211, 146, 0.3), 
    rgba(100, 126, 255, 0.2)
  );
}

.nav-link-pill.active::after,
.nav-link-pill.router-link-active::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, #42d392, #647eff);
  border-radius: 0;
  box-shadow: 0 0 12px rgba(66, 211, 146, 0.8);
}

/* 登录按钮样式 */
.login-button {
  color: #e2e8f0;
  border: 1.5px solid rgba(66, 211, 146, 0.6);
  background: rgba(15, 35, 25, 0.7);
  backdrop-filter: blur(8px);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  font-weight: 600;
}

.login-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, 
    rgba(66, 211, 146, 0.2), 
    rgba(100, 126, 255, 0.15)
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.login-button:hover::before {
  opacity: 1;
}

.login-button:hover {
  color: #ffffff;
  border-color: rgba(66, 211, 146, 0.8);
  background: rgba(15, 35, 25, 0.9);
  transform: translateY(-1px);
  box-shadow: 
    0 4px 12px rgba(66, 211, 146, 0.5),
    0 0 20px rgba(100, 126, 255, 0.3);
}

.login-button:active {
  transform: translateY(0);
}

.login-button:active::before {
  opacity: 1;
  background: linear-gradient(135deg, 
    rgba(66, 211, 146, 0.3), 
    rgba(100, 126, 255, 0.25)
  );
}

.login-button svg {
  transition: transform 0.3s ease;
  position: relative;
  z-index: 1;
}

.login-button span {
  position: relative;
  z-index: 1;
}

.login-button:hover svg {
  transform: scale(1.1);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
</style>

